<template>
  <div class="letter-detail">
    <div class="flex align-center justify-between mb-10">
      <div class="goBack flex align-center">
        <Icon
          class="cup"
          @click="goBack()"
          type="md-arrow-back"
          size="18"
          color="#0085FF"
        />
        <span class="ml-16 mr-16 tb f-size-16">{{ list.title }}</span>
        <span style="color: #bbb" class="f-size-12">{{ list.sendTime }}</span>
      </div>
      <span class="f-size-14 letter-delete p-4 cup" @click="deteleLetter">
        <span class="iconfont icon-shanchu mr-6 f-size-14"></span>删除
      </span>
    </div>
    <Card :bordered="false" style="padding: 40px">
      <div class="wrap">
        <div class="letter-title color-333 f-size-18 tb">{{ list.title }}</div>
        <p class="content" v-html="list.noticeContent"></p>
      </div>
    </Card>
  </div>
</template>

<script>
import { markSingle, delByIds } from "@/api/mq-service";
export default {
  props: ["sign"],
  data() {
    return {
      list: {},
    };
  },

  watch: {
    sign(val, oldval) {
      val == false
        ? ""
        : this.list.viewType == 2 || this.list.viewType == null
        ? this.Information(this.list.id)
        : "";
    },
    deep: true,
  },

  methods: {
    async Information(data) {
      await markSingle([data])
        .then((d) => {})
        .catch((e) => {
          let ev = e.msg ? e.msg : e.message;
          this.$Message.error(ev);
        });
    },

    deteleLetter() {
      if (this.list.messageType == 1) {
        return this.$Message.warning("系统公告无法删除");
      } // 判断是否含有系统公告
      this.$Modal.confirm({
        title: "删除",
        content: "确认删除吗?",
        onOk: () => {
          delByIds([this.list.id])
            .then((d) => {
              this.$Message.success("删除成功!");
              this.goBack();
            })
            .catch((e) => {
              let ev = e.msg ? e.msg : e.message;
              this.$Message.error(ev);
            });
        },
      });
    },

    goBack() {
      this.$emit("goBack", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.letter-detail {
  background-color: #fff;
  min-height: calc(100vh - 178px);
  padding: 0 10px;
  border: 1px solid #e9e7ea;
  border-top: none;
  .goBack {
    height: 26px;
    line-height: 26px;
  }
  .wrap {
    width: 800px;
    padding: 20px;
    margin: 0 auto;
    background: #f7f8fa;
    .letter-title {
      padding: 50px 40px 0;
      background: #fff;
      border-top: 2px solid #0084ff;
    }
    .content {
      min-height: 100px;
      padding: 24px 40px 30px;
      background: #fff;
      img {
        max-width: 400px;
        object-fit: contain;
      }
    }
    li {
      list-style: none;
      color: #0084ff;
      cursor: pointer;
      padding-bottom: 5px;
    }
  }
  .ivu-card {
    box-shadow: none !important;
  }
  .ivu-icon-md-arrow-back {
    line-height: 26px;
  }
  .letter-delete:hover {
    background-color: #ebeef2;
  }
}
</style>
